<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
    <script>
        $(function () {
            //开始就要加载数据
            load()
            //1 按下回车键 把完整的数据存储到本地存储里面
            $("#title").on("keydown", function (event) {
                if (event.keyCode == 13) {
                    var localData = getData()
                    console.log(localData)
                    localData.push({ title: $(this).val(), fone: false })
                    saveData(localData)
                    //按回车需要加载
                    load()
                    $(this).val("")
                }
            })
            function getData() {
                //判断有没有数据
                var localData = localStorage.getItem("todouList");
                if (localData !== null) {
                    //本地存储的是字符串格式 但是我们需要对象格式
                    return JSON.parse(localData)
                } else {
                    //返回的是数组对象
                    return []
                }
            }
            function saveData(data) {
                //本地存储存储的是字符串 要转json格式
                localStorage.setItem("todouList", JSON.stringify(data))
            }
            //2 加载数据
            function load() {
                //获取数据
                var data = getData()
                //先确定之前的ol清空 否则数据重复
                $("ul,ol").empty()
                //正在进行的操作
                var todoCount=0;
                //完成的操作
                var doneCount=0
                //通过each遍历数据然后给li内容赋值
                $.each(data, function (index, item) {
                    if (item.fone) {
                        doneCount++
                        //创建的时候给每个li添加一个id属性 
                        $("ul").prepend("<li><input type='checkbox' id=" + index + " checked=true' ></input> <p>" + item.title + "</p> <a href='javascript:;'></a></li>")
                    }else{
                        todoCount++
                        $("ol").prepend("<li><input type='checkbox' id=" + index + " ></input> <p>" + item.title + "</p> <a href='javascript:;'></a></li>")
                    }
                })
                $("#todocount").text(todoCount)
                $("#donecount").text(doneCount)
            }
            //3 删除数据
            $("ol,ul").on("click", "a", function () {
                //获取数据
                var data = getData()
   
                //修改数据 找到a对应的数据
                data.splice($(this).siblings("input").attr("id"), 1)
                //保存数据
                saveData(data)
                //重新加载
                load()
            })
            //4 正在运行 和 已完成操作
            $("ul,ol").on("click", "input", function () {
                //获取数据
                var data = getData()
                console.log(data)
                //修改数据
                var index = $(this).attr("id")
                data[index].fone = $(this).prop("checked")
                //保存数据
                saveData(data)
                //重新加载
                load()
            })
        })
    </script>
</body>

</html>